<script setup lang="ts">

import {computed} from "vue";
import HexCell from "@/components/hex/HexCell.vue";
import {HexPosition, IHexContainer} from "@/components/hex/HexContainer";

export interface HexData {
  fill?: string;

  showHex?: boolean;
  hexFill?: string;
  hexAttrs?: any;

  showCircle?: boolean;
  circleFill?: string;
  circleAttrs?: any;

  text?: string;
  textAttr?: any;

  onClick?: (pos: HexPosition) => void;
}

interface HexGridProps {
  data: IHexContainer<HexData>;
  radius?: number;
  width?: number;
  height?: number;
  inclination?: number;
  center?: [number, number];

  showHex?: boolean;
  showCircle?: boolean;
}

const props = withDefaults(defineProps<HexGridProps>(), {
  radius: 20,
  width: 800,
  height: 800,
  // boolean?类型的值需要显式给默认值undefined，否则会默认false
  showHex: undefined,
  showCircle: undefined,
});

const center = computed<[number, number]>(() =>
    props.center ?? [props.width / 2, props.height / 2]
);

</script>

<template>
  <!-- 整个画布 -->
  <svg
      :width="width"
      :height="height"
      stroke="#222"
      stroke-width="1"
  >
    <!-- 边框：铺满视口 -->
    <rect
        x="0" y="0"
        width="100%" height="100%"
        fill="none"
        stroke="#666"
        stroke-width="1"
        vector-effect="non-scaling-stroke"
    />
    <slot name="back"></slot>
    <!-- 内容 -->
    <template v-for="[position, hex] in data.entries()">
      <HexCell
          :radius="radius"
          :position="position"
          :inclination="inclination"
          :center="center"
          :fill="hex.fill"
          :showHex="hex.showHex ?? showHex"
          :hexFill="hex.hexFill"
          :hexAttrs="hex.hexAttrs"
          :showCircle="hex.showCircle ?? showCircle"
          :circleFill="hex.circleFill"
          :circleAttrs="hex.circleAttrs"
          :text="hex.text"
          :textAttr="hex.textAttr"
          @click="hex.onClick"
      >
        <template #default="props">
          <slot
              name="cell"
              :hex="hex"
              :props="props"
          ></slot>
        </template>
      </HexCell>
    </template>
    <slot name="front"></slot>
  </svg>
</template>

<style scoped>

</style>